<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="20" class="data-cards">
      <el-col :span="6" v-for="card in dataCards" :key="card.title">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="data-card">
            <div class="card-icon" :style="{ background: card.color }">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-container">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>应用使用趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="lineChartOption" autoresize />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>应用类型分布</span>
            </div>
          </template>
          <v-chart class="chart" :option="pieChartOption" autoresize />
        </el-card>
      </el-col>
    </el-row>

    <!-- 新闻列表 -->
    <el-card shadow="hover" class="news-container">
      <template #header>
        <div class="card-header">
          <span>最新动态</span>
          <el-button text>查看更多</el-button>
        </div>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="(news, index) in newsList"
          :key="index"
          :timestamp="news.time"
          :type="news.type"
        >
          <h4>{{ news.title }}</h4>
          <p>{{ news.content }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  Monitor,
  Connection,
  Money,
  Timer
} from '@element-plus/icons-vue'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 数据卡片
const dataCards = [
  {
    title: '总应用数',
    value: '128',
    icon: 'Monitor',
    color: '#409EFF'
  },
  {
    title: '活跃应用',
    value: '85',
    icon: 'Connection',
    color: '#67C23A'
  },
  {
    title: '总消费',
    value: '￥1,234',
    icon: 'Money',
    color: '#E6A23C'
  },
  {
    title: '运行时长',
    value: '1,432h',
    icon: 'Timer',
    color: '#F56C6C'
  }
]

// 时间范围选择
const timeRange = ref('month')

// 折线图配置
const lineChartOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['API调用量', '计算时长']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'API调用量',
      type: 'line',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '计算时长',
      type: 'line',
      smooth: true,
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}

// 饼图配置
const pieChartOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '应用类型',
      type: 'pie',
      radius: '70%',
      data: [
        { value: 35, name: 'AI应用' },
        { value: 25, name: '数据分析' },
        { value: 20, name: '自动化工具' },
        { value: 15, name: '区块链' },
        { value: 5, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// 新闻列表
const newsList = [
  {
    title: '新功能发布',
    content: '新增GPT-4模型支持，提供更强大的AI能力',
    time: '2024-02-21',
    type: 'success'
  },
  {
    title: '系统更新',
    content: '优化API调用性能，提升响应速度',
    time: '2024-02-20',
    type: 'info'
  },
  {
    title: '价格调整',
    content: '部分API服务价格调整，详情请查看公告',
    time: '2024-02-19',
    type: 'warning'
  }
]
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: 100%;
  box-sizing: border-box;
}

.data-cards {
  margin-bottom: 20px;
}

.data-card {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.card-icon :deep(.el-icon) {
  font-size: 24px;
  color: white;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.charts-container {
  margin-bottom: 20px;
}

.chart {
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-container {
  margin-bottom: 20px;
}

:deep(.el-timeline-item__node--normal) {
  left: -2px;
}

:deep(.el-timeline-item__content) {
  h4 {
    font-size: 16px;
    margin: 0 0 8px;
    color: #303133;
  }
  p {
    color: #606266;
    margin: 0;
  }
}

:deep(.el-card) {
  margin-bottom: 20px;
}

:deep(.el-timeline) {
  padding-left: 16px;
}
</style>
